<template>
  <div class="search">
    <el-row :gutter="10">
      <el-col :sm="24" :md="12">
        <el-card>
          <template #header>
            <div class="search-header">
              <span>线上热门搜索</span>
              <i class="el-icon-more"></i>
            </div>
          </template>
          <div class="search-chart-container">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12">
                <SearchCard />
              </el-col>
              <el-col :xs="24" :sm="12">
                <SearchCard />
              </el-col>
            </el-row>

            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" label="排名" sortable width="50" />

              <el-table-column prop="keyword" label="关键字" />

              <el-table-column prop="userNum" label="用户数" sortable />

              <el-table-column prop="weekUp" label="周涨幅" sortable />
            </el-table>

            <el-pagination
              layout="prev, pager, next"
              :total="50"
              class="search-chart-pagination"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :md="12">
        <el-card>
          <template #header>
            <div class="search-header">
              <span>线上热门搜索</span>
              <el-radio-group v-model="channel" size="mini">
                <el-radio-button label="1">全部渠道</el-radio-button>
                <el-radio-button label="2">线上</el-radio-button>
                <el-radio-button label="3">门店</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="search-chart-container">
            <PieChart />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PieChart from './components/PieChart.vue'
import SearchCard from './components/SearchCard.vue'
export default {
  name: 'Search',
  components: {
    PieChart,
    SearchCard
  },
  data() {
    return {
      channel: '1',
      tableData: [
        { keyword: '北京', userNum: 1626, weekUp: 3340 },
        { keyword: '上海', userNum: 6600, weekUp: 8101 },
        { keyword: '广州', userNum: 2196, weekUp: 7814 },
        { keyword: '深圳', userNum: 7120, weekUp: 8888 },
        { keyword: '杭州', userNum: 1949, weekUp: 6240 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin: 10px;
}
.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
}
.search-chart-container {
  height: 470px;
  width: 100%;
  // .search-chart-card {
  //   display: flex;
  //   justify-content: space-between;
  // }
}
.search-chart-pagination {
  float: right;
  margin-bottom: 10px;
}
</style>
